<script>
import {defineComponent} from 'vue'
import userApi from "@/utils/api/userApi";

export default defineComponent({
  name: "UserIndex",
  created() {
    this.initUser()
  },
  data(){
    return {
      user: {
        userId: null,
        uname: null,
        imgUrl: null,
        self: false
      }
    }
  },
  methods: {
    async initUser(){
      this.user = await userApi.getUserInfo()
    },
    gotoUserAct(){
      this.$router.push({
        path: '/user/act'
      })
    }
  }
})
</script>

<template>
  
  <div style="margin: 10px" v-if="user.userId===null">
    <van-skeleton title avatar :row="3" />
  </div>
  
  <div class="user-index-bg-div" v-else>
    <div class="user-index-div">
      <van-cell-group inset class="user-index-cell-group">
<!--        头像用户名-->
        <van-cell>
          <template v-slot:title>
            <div class="user-header-div">
              <div class="user-header-avatar">
                <van-image :src="user.imgUrl"
                           width="40"
                           height="40"
                           loading-icon="user-circle-o"
                           error-icon="user-circle-o"
                           icon-size="40"
                           round>
                
                </van-image>
              </div>
              
              <div class="user-header-username">
                {{user.uname }}
              </div>
            </div>
          
          </template>
        </van-cell>
        
<!--        菜单-->
        <van-cell title="我的活动" size="large" clickable @click="gotoUserAct"/>
      </van-cell-group>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "@/assets/style/less/all.less";
.user-index-bg-div{
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: @user_index_bg_color;
  
}
.user-index-div{
  flex: 1 1 auto;
  height: 100vh;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 23px;
  
  display: flex;
  flex-direction: column;
  
}
.user-index-cell-group{
  background-color: white;
  border: 1px solid @user_index_cell_group_border_color;
  margin: 0 0 7px 0;
  
}

.user-header-div{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  >.user-header-avatar{
    .flex-item-fix();
  }
  >.user-header-username{
    .flex-item-fit-width();
    padding-left: 15px;
  }
}
.user-index-cell-title-div{
  color: @default_color;
  font-size: 16px;
  line-height: 23px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  >span:not(:first-child){
    margin-left: 8px;
  }
}
#user-index-no-identity{
  color: @user_index_no_identity_color;
}
#user-index-identity{
  color: @user_index_identity_color;
}
.user-index-cell-value-div{
  font-size: 14px;
  line-height: 20px;
  color: @user_index_num_color;
}
#goto-admin-div{
  color: @user_index_goto_admin_color;
}
.logout{
  font-size: 14px;
}
.user-index-identity-item-div{
  display: flex;
  padding: 0 50px 10px;
  
  :deep(.user-identity-item-div){
    margin: 10px 20px;
  }
}
</style>